<template>
  <div class="plugin-test">
    <h2>🔧 插件集成测试页面</h2>
    
    <!-- 错误处理测试 -->
    <div class="test-section">
      <h3>错误处理测试</h3>
      <el-button @click="testErrorHandler" type="danger">
        测试错误处理
      </el-button>
      <el-button @click="testApiError" type="warning">
        测试API错误
      </el-button>
      <el-button @click="showErrorLog" type="info">
        查看错误日志
      </el-button>
    </div>

    <!-- 性能优化测试 -->
    <div class="test-section">
      <h3>性能优化测试</h3>
      <el-button @click="testPerformance" type="primary">
        测试性能监控
      </el-button>
      <el-button @click="testMemory" type="success">
        测试内存管理
      </el-button>
      <el-button @click="showPerformanceReport" type="info">
        查看性能报告
      </el-button>
    </div>

    <!-- 防抖节流测试 -->
    <div class="test-section">
      <h3>防抖节流测试</h3>
      <el-input 
        v-debounce:500="handleDebounceInput"
        placeholder="防抖输入 (500ms)"
        style="margin-bottom: 10px;"
      />
      <div 
        v-throttle:200="handleThrottleScroll"
        class="throttle-container"
        style="height: 100px; overflow-y: auto; border: 1px solid #ddd; padding: 10px;"
      >
        <p v-for="i in 20" :key="i">滚动测试内容 {{ i }}</p>
      </div>
    </div>

    <!-- 懒加载测试 -->
    <div class="test-section">
      <h3>懒加载测试</h3>
      <div style="height: 200px; overflow-y: auto;">
        <img 
          v-lazy="'https://picsum.photos/300/200?random=' + i"
          v-for="i in 5"
          :key="i"
          style="width: 100%; margin-bottom: 10px;"
          alt="懒加载图片"
        />
      </div>
    </div>

    <!-- 测试结果显示 -->
    <div class="test-results">
      <h3>测试结果</h3>
      <pre>{{ testResults }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PluginTest',
  data() {
    return {
      testResults: '等待测试...',
      scrollCount: 0,
      inputCount: 0
    }
  },
  
  methods: {
    // 错误处理测试
    testErrorHandler() {
      try {
        throw new Error('这是一个测试错误')
      } catch (error) {
        this.$errorHandler.handleError(error, {
          component: 'PluginTest',
          method: 'testErrorHandler',
          data: { test: true }
        })
        this.addResult('✅ 错误处理测试完成')
      }
    },
    
    testApiError() {
      const mockError = {
        name: 'ApiError',
        message: 'API请求失败',
        response: { status: 500 }
      }
      
      this.$errorHandler.handleError(mockError, {
        component: 'PluginTest',
        method: 'testApiError',
        data: { status: 500 }
      })
      this.addResult('✅ API错误处理测试完成')
    },
    
    showErrorLog() {
      const errorLog = this.$errorHandler.getErrorLog()
      this.testResults = `错误日志 (${errorLog.length} 条):\n` + 
        JSON.stringify(errorLog, null, 2)
    },
    
    // 性能优化测试
    testPerformance() {
      // 测试组件渲染性能
      const result = this.$performance.measureComponentRender('PluginTest', () => {
        return this.renderTestComponent()
      })
      
      this.addResult(`✅ 性能监控测试完成，渲染时间: ${result}ms`)
    },
    
    testMemory() {
      // 测试内存管理
      const testData = { 
        id: Date.now(), 
        data: new Array(1000).fill('test') 
      }
      
      this.$memory.set('testData', testData)
      const retrieved = this.$memory.get('testData')
      
      this.addResult(`✅ 内存管理测试完成，缓存大小: ${this.$memory.size()}`)
    },
    
    showPerformanceReport() {
      const report = this.$performance.getReport()
      this.testResults = `性能报告:\n` + JSON.stringify(report, null, 2)
    },
    
    // 防抖节流测试
    handleDebounceInput(value) {
      this.inputCount++
      this.addResult(`防抖输入触发 (${this.inputCount}): ${value}`)
    },
    
    handleThrottleScroll(event) {
      this.scrollCount++
      this.addResult(`节流滚动触发 (${this.scrollCount}): ${event.target.scrollTop}px`)
    },
    
    // 辅助方法
    renderTestComponent() {
      // 模拟组件渲染
      const start = Date.now()
      for (let i = 0; i < 10000; i++) {
        Math.random()
      }
      return Date.now() - start
    },
    
    addResult(message) {
      const timestamp = new Date().toLocaleTimeString()
      this.testResults += `[${timestamp}] ${message}\n`
    }
  },
  
  mounted() {
    this.addResult('🚀 插件测试页面已加载')
    this.addResult('✅ 错误处理插件已集成')
    this.addResult('✅ 性能优化插件已集成')
    this.addResult('✅ 防抖节流指令已可用')
    this.addResult('✅ 懒加载指令已可用')
  }
}
</script>

<style scoped>
.plugin-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
}

.test-section h3 {
  margin-top: 0;
  color: #409eff;
}

.test-results {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.test-results pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 12px;
  line-height: 1.4;
}

.throttle-container {
  background-color: white;
  border-radius: 4px;
}

.throttle-container p {
  margin: 5px 0;
  padding: 5px;
  background-color: #f0f9ff;
  border-radius: 2px;
}
</style>
